Skip to content

fix: migrate list component to Svelte 5 runes syntax#3010

Open
abhay-dev2901 wants to merge 2 commits intoappwrite:mainfrom
abhay-dev2901:fix/list-component-migration
Open

fix: migrate list component to Svelte 5 runes syntax#3010
abhay-dev2901 wants to merge 2 commits intoappwrite:mainfrom
abhay-dev2901:fix/list-component-migration

Conversation

@abhay-dev2901
Copy link
Copy Markdown

@abhay-dev2901 abhay-dev2901 commented Apr 29, 2026

What does this PR do?

Updates the list.svelte component to use Svelte 5 runes syntax. The project is already running Svelte 5, but this component was still using the old export let syntax.

Changes:

  • Switched from export let children to let { children }: { children?: Snippet } = $props()
  • Updated template to use {@render children?.()} instead of the old slot syntax
  • Kept the existing CSS styling (gap: 0.25rem)
  • Added proper TypeScript typing for the children prop

Test Plan

I tested this by:

  1. Adding the List component to the account page with some test items
  2. Checking that it renders correctly and the styling looks right
  3. Making sure it still works with empty content
  4. Verifying hot-reload still works during development

To test yourself:

  • Run bun run dev
  • Navigate to any page that uses a List component
  • The component should render normally with the new syntax

Related PRs and Issues

This is part of the effort to clean up the remaining ~500 files that still use legacy Svelte 4 syntax.

Have you read the Contributing Guidelines on issues?

Yes.

download

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Apr 29, 2026

Greptile Summary

Migrates list.svelte from legacy Svelte 4 <slot /> syntax to Svelte 5 runes ($props(), {@render children?.()}), and moves the inline style:gap to a scoped CSS class. The migration is correct and follows the runes patterns documented in AGENTS.md.

Confidence Score: 5/5

Safe to merge — single-file change with a straightforward Svelte 4→5 migration and no logic changes.

No P0 or P1 findings. The runes migration is correct, children is properly typed as an optional Snippet, and {@render children?.()} is backward-compatible with Svelte 4 callers.

No files require special attention.

Important Files Changed

Filename Overview
src/lib/components/list.svelte Migrated from Svelte 4 slot syntax to Svelte 5 runes ($props, {@render children?.()}); inline gap style moved to scoped CSS class; TODO comment resolved.

Reviews (2): Last reviewed commit: "Resolved comments" | Re-trigger Greptile

Comment thread src/lib/components/list.svelte Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant